@charset 'utf-8';

@import 'common';


.back-button{
    width: getRem(123px);
    height: getRem(57px);
    text-align: center;
    border: 1px solid $defaultcolor;
    line-height: getRem(57px);
    border-radius: getRem(20px);
    font-size: getRem(24px);
    margin-top: getRem(48px);  
    a{
        color: black;
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}


.mid-title{
    width: getRem(103px);
    font-size: getRem(24px);
    margin: getRem(64px) auto 0;
}

.star-button{
    width: getRem(54px);
    height: getRem(48px);
    margin-top: getRem(54px);
    img{
        width: 100%;
        height: 100%;
    }
}



.detail-mid{
     width: 100%;
     height: getRem(253px);
    .detail-mid-wrap{
        width: 88.5%;
        height: 100%;
        margin: 0 auto;
        .top{
            width: 100%;
            height: getRem(120px);
            a{
                display: inline-block;
                width: getRem(111px);
                height: getRem(59px);
                background-color: $defaultcolor;
                color: white;
                border-radius: getRem(20px);
                font-size: getRem(29px);
                text-align: center;
                line-height: getRem(59px);
                margin-top: getRem(37px);
                font-weight: normal;
            }
            .price{
                font-size: getRem(56px);
                margin-top: getRem(37px);
                color: $defaultcolor;
            }
        }
        
        .mid{
            width: 100%;
            height: getRem(64px);
            font-size: getRem(30px);
            line-height: getRem(53px);
            .mid-left{
                width: getRem(202px);
                height: getRem(53px);
                .star-wrap{
                width: getRem(36px);
                height: getRem(36px);
                display: inline-block;
                vertical-align: middle;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span:nth-of-type(2){
                    display: inline-block;                   
                    vertical-align: middle; 
                    em{
                        color: $defaultcolor;
                    } 
                }
            }
            .mid-right{
                display: block;
                color: #8e8e8e;
                font-size: getRem(25px);
                vertical-align: middle; 
            }
        }
        
        .bottom{
            width: 100%;
            height: getRem(67px);
            background-color: $defaultcolor;
            line-height: getRem(67px);
            span:first-of-type{
                font-size: getRem(28px);
                color: white;
                margin-left: getRem(11px);
            }
            span:last-of-type{
                font-size: getRem(26px);
                color: white;
                margin-right: getRem(9px);
            }
        }
    }
}



.shop{
    li{
        width: 88.5%;
        height: getRem(176px);
        margin: getRem(10px) auto 0;
        .shop-img{
            width: getRem(210px);
            height: getRem(176px);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .message{
            height: getRem(164px);
            overflow: hidden; 
            padding-left: getRem(21px);      
        }
    }
}

.row-1 {
    font-size: getRem(27px);
    h4{
        font-weight: normal;
    }
    h4:first-child{
        float: left;
        width: getRem(265px);
        font-size: getRem(30px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: normal;
    }
    h4:nth-child(2){
        float: right;
        font-size: getRem(17px);
        font-weight: normal;
    }
    
}

.row-2{
    font-size: 0;
    color: #696969;
    margin-top: getRem(6px);
    span{
        display: inline-block;
        width: getRem(34px);
        height: getRem(34px);
        line-height: getRem(24px);
        img{
            width: 100%;
        }
    }
    span:last-of-type{
        font-size: getRem(24px);
        width: getRem(54px);
        height: getRem(24px);
        margin-left: getRem(13px);
    }
}

.distance {
    margin-top: getRem(6px);
    h4:first-child {
        float: left;
        font-size: getRem(23px);
        font-weight: normal;
        color: #cdcdcd;
    }
    h4:nth-child(2) {
        float: right;
        color: #696969;
    }
}

.check-detail {
    margin-top: getRem(10px);
    font-size: getRem(19px);
    a {
        color: $defaultcolor;
    }
}


.enter{
    width: getRem(111px);
    height: getRem(59px);
    background: $defaultcolor;
    font-size: getRem(29px);
    display: inline-block;
    float: right;
    text-align: center;
    border-radius: getRem(20px);
    line-height: getRem(59px);
    margin-top: getRem(67px);
    a{
        color: white;
    }
}


.detail-header{
   .back-button{
       margin-left: getRem(23px);
   }
   .star-button{
       margin-right: getRem(23px);
   }
}
